<template>
    <section class="signature">
        <div class="signatureBox">
            <div class="canvasBox" ref="canvasHW">
                <canvas class='firstCanvas' ref="canvasHW" :canvas-id="canvasId" @touchmove='move' @touchstart='start($event)'
                        @touchend='end' @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error' />
            </div>
        </div>
    </section>
    <div class="decoration">{{i18n('blankArea','请在空白区域内填写')}}</div>
    <div class="closeIcon">
        <i @click="close" class="iconfont icon-close"></i>
    </div>
    <div class="btnBox">
        <div @click="close">{{$ti18('rxForm.waitAllVoted','返回')}}</div>
        <div @tap="clear">{{$ti18('rxList.resetBtn', '重置')}}</div>
        <div @click="commit">{{$ti18('rxForm.okBtn','确定')}}</div>
    </div>
</template>

<script>
var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
uni.getSystemInfo({
    success: function(res) {
        canvasw = res.windowWidth;
        canvash = res.windowHeight + 300;
    },
})
import { FormApi } from "@/api/FormApi.js";
import dayjs from "dayjs";
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
export default {
    name: 'RxSignDialog',
    props: {
        canvasId: {
            type: String,
            default: 'firstCanvas'
        },
        curUserId:{
            type:String,
            default: ''
        }
    },
    data() {
        return {
            imgUrl: '',
            eventName:'',
        }
    },
    onLoad() {
        let openGroupParams = uni.getStorageSync('RxSignDialog')
        let obj = openGroupParams.params;
        this.eventName = openGroupParams.eventName;
        this.getInfo()
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formCommonLang",key);
        },
        i18n_(name,text,key){
            return this.$ti18(name,text,"componentsLang",key);
        },
        getInfo() {
            //获得Canvas的上下文
            content = uni.createCanvasContext(this.canvasId, this)
            //设置线的颜色

            content.setStrokeStyle("#000")
            //设置线的宽度
            content.setLineWidth(5)
            //设置线两端端点样式更加圆润
            content.setLineCap('round')
            //设置两条线连接处更加圆润
            content.setLineJoin('round')
        },
        // 画布的触摸移动开始手势响应
        start(e) {
            let point = {
                x: e.touches[0].x,
                y: e.touches[0].y,
            }
            touchs.push(point);
        },
        // 画布的触摸移动手势响应
        move: function(e) {
            let point = {
                x: e.touches[0].x,
                y: e.touches[0].y
            }
            touchs.push(point)
            if (touchs.length >= 2) {
                this.draw(touchs)
            }
        },

        // 画布的触摸移动结束手势响应
        end: function(e) {
            //清空轨迹数组
            for (let i = 0; i < touchs.length; i++) {
                touchs.pop()
            }

        },

        // 画布的触摸取消响应
        cancel: function(e) {
            // console.log("触摸取消" + e)
        },

        // 画布的长按手势响应
        tap: function(e) {
            // console.log("长按手势" + e)
        },

        error: function(e) {
            // console.log("画布触摸错误" + e)
        },

        //绘制
        draw: function(touchs) {
            let point1 = touchs[0]
            let point2 = touchs[1]
            content.moveTo(point1.x, point1.y)
            content.lineTo(point2.x, point2.y)
            content.stroke()
            content.draw(true);
            touchs.shift()

        },
        //清除操作
        clear: function() {
            //清除画布
            content.clearRect(0, 0, canvasw, canvash)
            content.draw(true)
        },
        //确定签名
        commit() {
            var self = this;
            uni.canvasToTempFilePath({
                canvasId: self.canvasId,
                success: function(res) {
                    console.info('====',res)
                    self.imgUrl = res.tempFilePath;
                    self.uploadImgApp(self.imgUrl)
                },
                fail: function(err) {

                }
            }, this)
        },
        getTime(){
            let format = "YYYY-MM-DD HH:mm:ss";
            return dayjs().format(format);
        },
        uploadImgApp(imgUrl){
            let self = this;
            FormApi.uploadSignature({
                filePath: imgUrl,
                fileType: 'image'
            }).then(res => {
                if (res.success) {
                    let obj = {
                        'fileId': res.data[0].fileId,
                        'time': self.getTime(),
                        'userId': self.curUserId
                    }
                    uni.navigateBack({
                        delta:1,
                        success:function() {
                            uni.$emit(self.eventName,obj)
                        }
                    })
                }else {
                    uni.showToast({
                        title:this.i18n_('Error','出错了'),
                        duration: 2000,
                        icon:'error'
                    })
                    return ;
                }
            })
        },
        close() {
            uni.navigateBack({
                delta: 1
            });
        },
    }
}
</script>

<style scoped>
.signature {
    width: 100%;
    height: 100vh;
}
.signatureBox {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.canvasBox {
    background: #f1f7f6;
    width: 100vw;
    box-sizing: border-box;
    flex: 1;
}

.firstCanvas {
    background-position: center center;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
}

.btnBox {
    display: flex;
    position: absolute;
    bottom: 5rem;
    left: -3rem;
    transform: rotate(90deg);
}

.btnBox div {
    text-align: center;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 14px;
    border-radius: .3rem;
    padding: 0 .6rem;
    margin: .4rem;
    background: #fff;
    color: #555;
    border: 1px solid #ddd;
}

.btnBox div:last-child {
    background: #007aff;
    color: #fff;
    border: 1px solid #007aff;
}

/*签名组件*/

.decoration {
    transform: rotate(90deg);
    font-size: 14px;
    color: #b3d0ca;
    position: absolute;
    top: 3.5rem;
    right: -2rem;
}

.closeIcon {
    position: absolute;
    bottom: .5rem;
    right: 1rem;
}

.closeIcon i {
    font-size: 1.5rem;
    color: #95acc5;
}
</style>
